DropDownList ToolTip ASP.Net Using Javascript

Logic I

<script language=”javascript” type=”text/javascript”>

showHideTooltip = function ()
{
var obj = document.getElementById(‘<%=Ddl_CustomerName.ClientID %>’);
document.getElementById(“tooltip”).innerHTML = obj.options[obj.selectedIndex].value;
if(event.type == “mouseleave”)
{
document.getElementById(“tooltip”).style.display = “none”;
}
else
{
document.getElementById(“tooltip”).style.display = “inline”
document.getElementById(“tooltip”).style.top = event.y;
document.getElementById(“tooltip”).style.left = event.x;
}
}

</script>

<asp:DropDownList ID=”Ddl_CustomerName” runat=”server” CssClass=”DropDownList” ValidationGroup=”top”
onmouseleave=”showHideTooltip()” onmouseenter=”showHideTooltip()” Width=”250px”>
</asp:DropDownList>
<span id=”tooltip” style=”BORDER-RIGHT: #000000 1px solid; PADDING-RIGHT:
3px; BORDER-TOP: #000000 1px solid; DISPLAY: inline; PADDING-LEFT: 3px;
FONT-SIZE: 12px; PADDING-BOTTOM: 3px; BORDER-LEFT: #000000 1px solid;
PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px solid; FONT-FAMILY: Verdana;
POSITION: absolute; BACKGROUND-COLOR: #a6bed9″>
</span>

Here we can get the DropDownList Value Field on the ToopTip after Selecting the Item.

Logic II

Nothing but Simple by doing this on CodeBehind

Ddl_ProjContact1.Items.Clear();
Ddl_ProjContact1.DataSource = DL.FillProjectContacts();
Ddl_ProjContact1.DataTextField = “NameDesig”;
Ddl_ProjContact1.DataValueField = “MailCode”;
Ddl_ProjContact1.DataBind();
foreach (ListItem _listItem in this.Ddl_ProjContact1.Items)
{
_listItem.Attributes.Add(“title”, _listItem.Text);
}
Ddl_ProjContact1.Items.Insert(0, “Select”);

Javascript:

Add options dynamically

DescDDL.options[DescDDL.options.length] = new Option(‘Your Text’, ‘Your Value’);

Remove options dynamically

DescDDLremove(OptionIndex);